<template>
  <div class="search-list">
    <div class="headers">
      <ul>
        <li>
          <div>综合</div>
        </li>
        <li>
          <div>销量</div>
        </li>
        <li>
          <div>新品</div>
        </li>
        <li>
          <div>价格</div>
        </li>
      </ul>
    </div>
    <section>
      <ul v-if="goodsList?.length">
        <li v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
          <img :src="item.img_url" alt="" />
          <h3>{{ item.name }}</h3>
          <div class="price">
            <div>
              <span>￥</span>
              <b>{{ item.price }}</b>
            </div>
            <div>{{ item.sales }}☆</div>
          </div>
        </li>
      </ul>
      <div v-else class="no-data">暂无数据</div>
    </section>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, watch, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import http from '@/common/api/request'
import APIS from '@/common/api/api'
const searchList = defineComponent({
  name: 'SearchList',
  // 组件的其他选项...
})
const router = useRouter()
const route = useRoute()
const keyword = ref(route?.query?.keyword || '')
const goodsList = ref([])

const fetchGoodsData = async (keyword) => {
  await http
    .$axios({
      url: APIS.getSearchList,
      params: { keyword },
    })
    .then((res) => {
      console.log('res :>> ', res)
      goodsList.value = res?.data || []
    })
}

watch(keyword, (newVal, oldVal) => {
  console.log('[watch]route :>> ', route)
  //查询数据
})
onMounted(() => {
  fetchGoodsData(keyword.value)
  console.log('[onMounted]route :>> ', route)
})

const goDetail = (id) => {
  router.push({
    path: '/detail',
    query: { id },
  })
}
</script>

<style scoped>
.search-list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 150vh;
  overflow: hidden;
}

.headers ul {
  display: flex;
  justify-content: space-around;
  padding: 0.2rem 0;
  font-size: 0.426666rem;
  background-color: #fff;
}

.headers ul li {
  display: flex;
  align-items: center;
}

.headers ul li > div {
  padding: 0 0.08rem;
}

section {
  flex: 1;
  overflow: hidden;
}

section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

section ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 50%;
  padding: 0.266666rem;
}

section ul li img {
  width: 4.533333rem;
  height: 6.533333rem;
}

section ul li h3 {
  width: 100%;
  font-size: 0.373333rem;
  color: #222;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #fff;
}

section ul li .price {
  display: flex;
  justify-content: space-between;
  padding: 0.166666rem 0.16666rem;
  width: 100%;
  font-size: 14px;
  background-color: #fff;
}

section ul li .price div:first-child span {
  font-size: 0.32rem;
  color: black;
}
</style>
